<template>
  <div>
    <div class="sys-role-index">
      <el-container>
        <el-main>
          <!-- <div class="top-buttons">
            <el-tooltip effect="dark" content="刷新" placement="top-start">
              <el-button circle icon="el-icon-refresh" @click="init()"></el-button>
            </el-tooltip>
          </div> -->
          <el-row>
            <el-form :inline="true" size="small" :model="searchForm" class="demo-form-inline" @keyup.enter.native="search" @submit.native.prevent>
              <el-form-item>
                <el-input v-model="searchForm.name" placeholder="请输入角色名" />
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-search" type="primary"  @click="search" :disabled="!(permissions.indexOf('user_sysUser_query') > -1)">查询</el-button>
                <el-button class="margin-left-10" icon="el-icon-delete" @click="reset()">清空</el-button>
              </el-form-item>
              <el-tooltip effect="dark" content="刷新" placement="top-start">
                <el-button size="small" style="float: right;" class="float-right" icon="el-icon-refresh" @click="search" circle></el-button>
              </el-tooltip>
            </el-form>
          </el-row>
          <el-table
            border
            show-header
            stripe
            size="mini"
            :data="roleList"
            highlight-current-row ref="sysRoleTable">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.pageSize + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="角色名" align="center" show-overflow-tooltip/>
            <el-table-column prop="description" label="描述" align="center" show-overflow-tooltip/>
            <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip/>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope" >
                <el-button type="text" size="small" icon="el-icon-view" @click="look(scope.row)">查看权限</el-button>
                <el-button type="text" size="small" icon="el-icon-plus" @click="plusBtn(scope.row)" v-if="scope.row.isEdit == 0">权限</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :style="{float: 'right', padding: '20px'}"
            class="pageBar"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.current"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
          </el-pagination>
        </el-main>
      </el-container>
    </div>
    <dialog-comp ref="dialogRole" @saveRole="saveRole"></dialog-comp>
    <look-comp ref="lookComp"></look-comp>
    <d-s-comp ref="dsComp" @saveRole="saveRole"></d-s-comp>
    <ds-comp-look ref="dsCompLook"></ds-comp-look>
  </div>
</template>
<script>
import DialogComp from "./dialogRolComp";
import LookComp from "./lookComp";
import DSComp from "./dsComp";
import DsCompLook from "./dsCompLook";

import sysAccreditApi from "./api/sysAccredit.service";

export default {
  components: {
    DialogComp,
    LookComp,
    DSComp,
    DsCompLook
  },
  data() {
    return {
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
      menuTree: [],
      title: "",
      roleList: [],
      sysRoleId: "",
      isLook: false,
      searchForm: {
        name: ''
      },
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  created() {
    this.init(this.pageInfo);
  },
  methods: {

    /**
     * 数据源权限
     * @param row
     */
    plusDsBtn (row) {
      this.$refs.dsComp.showDS(row.id)
    },
    /**
     * 查看数据源权限
     * @param row
     */
    lookDsBtn(row) {
      this.$refs.dsCompLook.showDSView(row.id);
    },

    // 管理权限
    plusBtn (row) {
      this.$refs.dialogRole.show(row.id)
    },
    saveRole () {
      this.init(this.pageInfo)
    },
    // 查看
    look(row) {
      this.$refs.lookComp.show(row)
    },
    // 关闭
    close() {
      this.isLook = false;
    },
    // 初始化数据
    init(page) {
      let _this = this;
      sysAccreditApi.getSysRolePage(
        Object.assign({
          current: page.current,
          size: page.pageSize,
          name: this.searchForm.name
        })
      ).then(res => {
        _this.pageInfo.total = res.data.total;
        _this.roleList = res.data.records;
        console.log(this.roleList)
      });
    },
    // 改变页码
    handleSizeChange (val) {
      this.pageInfo.pageSize = val;
      this.init(this.pageInfo)
    },
    handleCurrentChange (val) {
      this.pageInfo.current = val;
      this.init(this.pageInfo)
    },
    search () {
      this.pageInfo.current = 1;
      this.init(this.pageInfo);
    },
    reset () {
      this.searchForm.name = '';
      this.search()
    }
  }
};
</script>

